<template>
  <Card>
    <div class="content-container">
      <Upload :show-upload-list="false" action="http://admin.vmcloud.ink/api/personalsetting/uPicture"
        :format="['jpg', 'jpeg', 'png', 'jfif']" :on-format-error="handleFormatError" :before-upload="beforeUpload" :on-success="handleUploadSuccess">
        <img class="upload-img" :src="coverImg" />
      </Upload>
      <div>
        <Row class="row">
          <Col span="12" class="title">
          <strong>省直辖市：</strong>
          </Col>
          <Col span="12">
          <Select v-model="province" placeholder="请选择" class="form" @on-select="onProvince">
            <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
        </Row>
        <Row class="row">
          <Col span="12" class="title">
          <strong>城市：</strong>
          </Col>
          <Col span="12">
          <Select v-model="city" placeholder="请选择" class="form">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
        </Row>
        <Row class="row">
          <Col span="12" class="title">
          <strong>地址：</strong>
          </Col>
          <Col span="12">
          <Input v-model="address" placeholder="请输入详细地址" class="form" />
          </Col>
        </Row>
        <Row class="row">
          <Col span="12" class="title">
          <strong>微信通知总开关：</strong>
          </Col>
          <Col span="12">
          <Select v-model="wechatNotice" placeholder="请选择" class="form">
            <Option v-for="item in settingList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
        </Row>
        <div v-show="wechatNotice === 0">
          <Row class="row">
            <Col span="12" class="title">
            <strong>出货通知：</strong>
            </Col>
            <Col span="12">
            <Select v-model="shipNotice" placeholder="请选择" class="form">
              <Option v-for="item in settingList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          <Row class="row">
            <Col span="12" class="title">
            <strong>温度预警通知：</strong>
            </Col>
            <Col span="12">
            <Select v-model="temperatureNotice" placeholder="请选择" class="form">
              <Option v-for="item in settingList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          <Row class="row">
            <Col span="12" class="title">
            <strong>机器故障通知：</strong>
            </Col>
            <Col span="12">
            <Select v-model="hitchNotice" placeholder="请选择" class="form">
              <Option v-for="item in settingList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          <Row class="row">
            <Col span="12" class="title">
            <strong>库存预警通知：</strong>
            </Col>
            <Col span="12">
            <Select v-model="stockNotice" placeholder="请选择" class="form">
              <Option v-for="item in settingList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          <Row class="row">
            <Col span="12" class="title">
            <strong>机器离线通知：</strong>
            </Col>
            <Col span="12">
            <Select v-model="offlineNotice" placeholder="请选择" class="form">
              <Option v-for="item in settingList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
        </div>
      </div>
    </div>
    <div class="band">
      <Button class="bandBtn" type="primary" @click="onSave">保存</Button>
    </div>
  </Card>
</template>

<script>
import {
  fileToBase64Async,
  settingList,
  settingValues,
} from '@/mock/data/option-data.js'
import provinceCityData from './provinceCityData'
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'

export default {
  name: 'personal-setting-page',
  data() {
    return {
      // 数据id
      settingId: '',
      // 上传的图片
      coverImg: 'https://img2.baidu.com/it/u=3189273452,4056187285&fm=253&fmt=auto&app=138&f=JPEG?w=516&h=500',
      // 省直辖市
      provinceList: [],
      province: '',
      // 市
      cityList: [],
      city: '',
      // 地址
      address: '',
      // 微信通知总开关
      wechatNotice: 0,
      // 出货通知
      shipNotice: 0,
      // 温度预警通知
      temperatureNotice: 0,
      // 机器故障通知
      hitchNotice: 0,
      // 库存预警通知
      stockNotice: 0,
      // 机器离线通知
      offlineNotice: 0,

      settingList,
    };
  },
  methods: {
    // 上传文件格式出错
    handleFormatError() {
      this.$Notice.warning({
        title: '文件格式出错',
        desc: '请选择图片格式的文件。'
      });
    },

    // 上传图片
    async beforeUpload(file) {
      const base64Data = await fileToBase64Async(file);
      this.coverImg = base64Data;
      return false;
    },

    // 图片上传成功
    handleUploadSuccess({ data }) {
      this.coverImg = data;
    },

    // 选择省份
    onProvince(value) {
      this.province = value;
      this.cityList = provinceCityData.filter(item => item.provinceName === this.province)[0].citys.map(item => ({
        value: item.cityName,
        label: item.cityName,
      }));
      this.city = this.cityList[0].value;
    },

    // 获取个人信息
    async getPersonalData() {
      const { data: { data: [{ id, address, city, province, image, wechat_notice, shipping_notice, temperature_notice, failure_notice, inventory_notice, offline_notice }] } } = await rcRequest({
        method: 'post',
        url: '/personalsetting/select_personal_setting_info_list',
        data: { },
      })
      this.settingId = id;
      this.address = address;
      this.city = city;
      this.province = province;
      this.coverImg = image || 'https://img2.baidu.com/it/u=3189273452,4056187285&fm=253&fmt=auto&app=138&f=JPEG?w=516&h=500';
      this.wechatNotice = wechat_notice;
      this.shipNotice = shipping_notice;
      this.temperatureNotice = temperature_notice;
      this.hitchNotice = failure_notice;
      this.stockNotice = inventory_notice;
      this.offlineNotice = offline_notice;
    },

    // 保存
    async onSave() {
      if (this.address.length === 0) {
        this.$Message.error('地址不能为空');
        return;
      }

      await rcRequest({
        method: 'post',
        url: '/personalsetting/update_personal_setting_info',
        data: {
          personal_setting_id: this.settingId,
          province: this.province,
          city: this.city,
          address: this.address,
          image: this.coverImg,
          wechat_notice: this.wechatNotice,
          shipping_notice: this.shipNotice,
          temperature_notice: this.temperatureNotice,
          failure_notice: this.hitchNotice,
          inventory_notice: this.stockNotice,
          offline_notice: this.offlineNotice,
        },
      })

      this.$Message.info('保存成功！');
    },
  },
  async mounted() {
    await this.getPersonalData()
    this.provinceList = provinceCityData.map(item => ({
      value: item.provinceName,
      label: item.provinceName,
    }));
    this.cityList = provinceCityData.filter(item => item.provinceName === this.province)[0].citys.map(item => ({
      value: item.cityName,
      label: item.cityName,
    }));
  },
}
</script>

<style scoped>
.content-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.upload-img {
  width: 245px;
  height: 245px;
}

.row {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.title {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.form {
  width: 300px;
}

.band {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 30px;
}

.bandBtn {
  margin-top: 10px;
  width: 100px;
}
</style>